<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>文多多 AiPPT</title>
    <script src="static/docmee-ui-sdk-iframe.min.js"></script>
    <style>
      body {
        margin: 0;
        width: 100vw;
        height: 100vh;
      }
      .input_div {
          padding: 20px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
      }
      #input_subject, #input_file, #input_dataUrl, #input_outline {
        display: none;
      }
      #container {
        display: none;
        width: calc(100% - 50px);
        height: calc(100% - 100px);
        margin: 0 auto;
        padding: 0;
        border-radius: 12px;
        box-shadow: 0 0 12px rgba(120, 120, 120, 0.3);
        overflow: hidden;
        background: linear-gradient(-157deg, #f57bb0, #867dea);
        color: white;
      }
    </style>
  </head>
  <body>
    <div style="text-align: center;padding: 5px;font-size: 14px">
        <a href="/" style="text-decoration: none;">返回：示例一</a>
        <div style="margin-top: 10px;">
          说明：通过代码去干预iframe内容的方式生成PPT<br>
          场景一：通过已有文本内容去生成PPT（根据内容）<br>
          场景二：通过文件链接去生成PPT（根据文件链接）<br>
          场景三：通过markdown大纲去生成PPT（导入大纲）
        </div>
    </div>
    <!-- 通过代码控制PPT创建 -->
    <div class="input_div">
        <select id="selectType" style="margin-right: 8px" onchange="changeSelectType()">
          <option value="subject">根据主题</option>
          <option value="text" selected>根据内容</option>
          <option value="file">根据文件</option>
          <option value="dataUrl">根据文件链接</option>
          <option value="outline">导入大纲</option>
        </select>
        <input id="input_subject" type="text" placeholder="PPT主题" />
        <textarea id="input_text" placeholder="请粘贴文本内容" rows="5" cols="50" maxlength="6000"></textarea>
        <input id="input_file" type="file" placeholder="请选择文件" accept=".doc, .docx, .xls, .xlsx, .pdf, .ppt, .pptx, .txt, .md" />
        <input id="input_dataUrl" type="text" placeholder="文件链接（公网可访问）" style="width:220px" />
        <input id="input_outline" type="file" placeholder="请选择文件" accept=".md, .doc, .docx, .xmind, .mm" />
        <button style="margin-left: 8px" onclick="generate()">生成PPT</button>
    </div>
    <!-- 挂载iframe容器 -->
    <div id="container"></div>
  </body>
  <script>
    if (location.protocol == 'file:') {
        alert('不支持 file 协议直接访问，请启动 http 服务访问！\n\n启动命令：npm run start')
    }

    var token = new URLSearchParams(window.location.search).get('token')
    if (!token) {
        alert('token不能为空')
    }

    // 初始化 UI iframe
    const docmeeUI = new DocmeeUI({
      pptId: null,
      token: token, // token
      container: document.querySelector('#container'), // 挂载 iframe 的容器
      page: 'creator', // 'dashboard' ppt列表; 'creator' 创建页面; 'customTemplate' 自定义模版
      lang: 'zh', // 国际化
      mode: 'light', // light 亮色模式, dark 暗色模式
      isMobile: false, // 移动端模式
      background: 'linear-gradient(-157deg,#f57bb0, #867dea)', // 自定义背景
      padding: '40px 20px 0px',
      onMessage(message) {
        console.log(message)
        if (message.type === 'invalid-token') {
          // 在token失效时触发
          console.log('token 认证错误')
          // 更换新的 token
          let newToken = createApiToken(apiKey, uid, limit)
          docmeeUI.updateToken(newToken)
        } else if (message.type === 'beforeGenerate') {
          const { subtype, fields } = message.data
          if (subtype === 'outline') {
            // 生成大纲前触发
            console.log('即将生成ppt大纲', fields)
            return true
          } else if (subtype === 'ppt') {
            // 生成PPT前触发
            console.log('即将生成ppt', fields)
            docmeeUI.sendMessage({
              type: 'success',
              content: '继续生成PPT',
            })
            return true
          }
        } else if (message.type === 'beforeCreateCustomTemplate') {
          const { file, totalPptCount } = message.data
          // 是否允许用户继续制作PPT
          console.log('用户自定义完整模版，PPT文件：', file.name)
          if (totalPptCount < 2) {
            console.log('用户积分不足，不允许制作自定义完整模版')
            return false
          }
          return true
        } else if (message.type == 'pageChange') {
          pageChange(message.data.page)
        } else if (message.type === 'beforeDownload') {
          // 自定义下载PPT的文件名称
          return `PPT_${new Date().getTime()}.pptx`
        } else if (message.type == 'error') {
          if (message.data.code == 88) {
            // 创建token传了limit参数可以限制使用次数
            alert('您的次数已用完')
          } else {
            alert('发生错误：' + message.data.message)
          }
        }
      }
    })
    
    function changeSelectType() {
        let selectTypes = ['subject', 'text', 'file', 'dataUrl', 'outline']
        let selectType = document.getElementById('selectType').value
        for (let i = 0; i < selectTypes.length; i++) {
            let element = document.getElementById('input_' + selectTypes[i])
            element.style.display = (selectType == selectTypes[i] ? 'inline-block' : 'none')
        }
    }

    function parseFileData(file) {
      const formData = new FormData()
      formData.append('file', file)
      let url = 'https://docmee.cn/api/ppt/parseFileData'
      let xhr = new XMLHttpRequest()
      xhr.open('POST', url, false)
      xhr.setRequestHeader('token', token)
      xhr.send(formData)
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            let resp = JSON.parse(xhr.responseText)
            if (resp.code != 0) {
                alert('解析文件异常：' + resp.message)
                return null
            }
            return resp.data.dataUrl
        } else {
          alert('解析文件网络异常, httpStatus: ' + xhr.status)
          return null
        }
      }
    }

    function extractFileOutline(file) {
      const formData = new FormData()
      formData.append('file', file)
      let url = 'https://docmee.cn/api/ppt/extractFileOutline?format=text'
      let xhr = new XMLHttpRequest()
      xhr.open('POST', url, false)
      xhr.setRequestHeader('token', token)
      xhr.send(formData)
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            let resp = JSON.parse(xhr.responseText)
            if (resp.code != 0) {
                alert('提取文件大纲异常：' + resp.message)
                return null
            }
            const data = resp.data
            return { dataUrl: data.dataUrl, outlineText: data.outlineText }
        } else {
          alert('提取文件大纲网络异常, httpStatus: ' + xhr.status)
          return null
        }
      }
    }

    function generate() {
        let selectType = document.getElementById('selectType').value
        let input = null
        if (selectType == 'file' || selectType == 'outline') {
            input = document.getElementById('input_' + selectType).files[0]
        } else {
            input = document.getElementById('input_' + selectType).value
        }
        if (!input) {
            alert('输入不能为空')
            return
        }
        if (selectType == 'dataUrl' && !input.startsWith('http')) {
            alert('文件链接格式错误')
            return
        }
        docmeeUI.navigate({ page: 'creator' })
        if (selectType == 'subject') {
            // 根据主题
            docmeeUI.changeCreatorData({ subject: input }, true)
        } else if (selectType == 'text') {
            // 根据文本内容
            docmeeUI.changeCreatorData({ text: input }, true)
        } else if (selectType == 'file') {
            // 根据文件
            let dataUrl = parseFileData(input)
            docmeeUI.changeCreatorData({ dataUrl }, true)
        } else if (selectType == 'dataUrl') {
            // 根据文件链接
            docmeeUI.changeCreatorData({ dataUrl: input }, true)
        } else if (selectType == 'outline') {
            // 导入大纲
            let data = extractFileOutline(input)
            docmeeUI.changeCreatorData({ outlineMarkdown: data.outlineText, dataUrl: data.dataUrl }, true)
        } else {
            alert('未知类型：' + selectType)
            return
        }
        document.querySelector('#container').style.display = 'block'
    }
  </script>
</html>